<template>
	<view class="content padding">
		<view class="head padding shadow">
			<view class="info flex flex-direction justify-between" style="height: 122rpx;">
				<text>商品名称</text>
				<view class="flex align-center  info_o response padding-lr">
					<input type="text" v-model="goodsInfo.denomination" placeholder="请输入商品名称" />
				</view>
			</view>
			<view class="info flex flex-direction justify-between" style="height: 122rpx;">
				<text>商品价格</text>
				<view class="flex align-center  info_o response padding-lr">
					<input type="number" v-model="goodsInfo.price" placeholder="请输入商品价格" />
				</view>
			</view>

			<view class="info flex flex-direction justify-between" style="height: 122rpx;">
				<text>商品描述</text>
				<view class="flex align-center  info_o response padding-lr">
					<input type="text" v-model="goodsInfo.classification" placeholder="请输入商品描述" />
				</view>
			</view>
		</view>
		<view class="head padding shadow margin-top">
			<view class="info flex flex-direction justify-between">
				<text class="margin-bottom">店铺主图</text>
				<view class="sfz ">
					<view
						@click="ChooseImage('goodsInfo.image', false)"
						style="position: relative; width: 300rpx;height: 200rpx;margin-right: 30rpx;background-color: #f1f1f1;"
					>
						<image
							:src="goodsInfo.image"
							class="radius"
							mode="aspectFill"
							v-if="goodsInfo.image"
							style="width: 100%; height: 100%;"
						></image>
						<view class="dianji" v-else><text class="cuIcon-add text-xl"></text></view>
					</view>
				</view>
			</view>

			<view class="info flex flex-direction justify-between">
				<text>商品详情图片</text>
				<!-- <view class="sfz ">
					<view v-for="(item, index) in productDetailsList" :key="index">
						<view
							class="info flex flex-direction justify-between"
							style="position: relative; width: 260rpx;height: 180rpx;margin-right: 30rpx;background-color: #f1f1f1;"
						>
							<view class="flex align-center   response " style="overflow: hidden;"><image :src="item" mode="aspectFill"></image></view>
						</view>
					</view>

					<view
						@click="ChooseImage('goodsInfo.productDetails', true)"
						style="position: relative; width: 300rpx;height: 200rpx;margin-right: 30rpx;background-color: #f1f1f1;"
					>
						<image
							:src="goodsInfo.productDetails"
							class="radius"
							mode="aspectFill"
							v-if="goodsInfo.productDetails"
							style="width: 100%; height: 100%;"
						></image>
						<view class="dianji" v-else><text class="cuIcon-add text-xl"></text></view>
					</view>
				</view> -->

				<view style="display: flex;flex-wrap:wrap; " class="justify-between">
					<view v-for="(item, index) in productDetailsList" :key="index" class="flex flex-wrap">
						<view
							class="info flex flex-direction justify-between"
							style="position: relative; width: 300rpx;height: 200rpx;background-color: #f1f1f1; "
						>
							<image :src="item" class="mar" style="width: 100%; height: 100%;" mode="aspectFill"></image>
						</view>
					</view>


					<view
						class="info flex flex-direction justify-between"
						@click="ChooseImage('goodsInfo.productDetails', true)"
						style="position: relative; width: 300rpx;height: 200rpx;background-color: #f1f1f1; "
					>
						<view class="flex align-center   response " style="justify-content: center;">
							<view class="dianji"><text class="cuIcon-add text-xl"></text></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<button class="cu-btn determine" @click="id ? modifyTheProduct() : addGoods()">确定</button>
	</view>
</template>

<script>
const app = getApp();
export default {
	data() {
		return {
			action: 'http://www.example.com/upload',
			goodsInfo: {
				merchantId: app.globalData.businessInfo.id,
				denomination: '',
				image: '',
				classification: '',
				price: '',
				carousel: '',
				productDetails: '',
			},
			productDetailsList: [],
			id: '',
		};
	},
	onLoad(e) {
		console.log('this.id :>> ', this.id);
		if (e.id) {
			this.goodsInfo.merchantId = e.id;
			this.id = e.id;
			app.globalData.api.getGoods(e.id).then(res => {
				console.log('res: ', res);
				if (res.code == 200) {
					// this.goodsInfo = res.resultObj
					this.goodsInfo.merchantId = res.resultObj.merchant_id;
					this.goodsInfo.denomination = res.resultObj.denomination;
					this.goodsInfo.image = res.resultObj.image;
					this.goodsInfo.classification = res.resultObj.classification;
					this.goodsInfo.price = res.resultObj.price;
					this.goodsInfo.productDetails = res.resultObj.product_details;
					this.goodsInfo.id = res.resultObj.id;
					this.productDetailsList = res.resultObj.product_details.split(',');
				}
			});
		}
	},
	methods: {
		async modifyTheProduct() {
			console.log('this.goodsInfo: ', this.goodsInfo);
			app.globalData.api.putGoods(this.goodsInfo).then(res => {
				if (res.code == 200) {
					this.$refs.uToast.show({ title: '修改成功~~', type: 'success' });
					setTimeout(() => {
						uni.navigateBack({
							delta: 1,
						});
					}, 1000);
				}
			});
		},
		addGoods() {
			if (
				[
					this.goodsInfo.denomination,
					this.goodsInfo.price,
					this.goodsInfo.classification,
					this.goodsInfo.image,
					this.goodsInfo.productDetails,
				].includes('')
			) {
				return this.$refs.uToast.show({ title: '不能为空~~', type: 'error' });
			}
			var that = this;
			console.log('that.goodsInfo', that.goodsInfo);
			app.globalData.api.addGoods(this.goodsInfo).then(res => {
				if (res.code == 200) {
					this.$refs.uToast.show({ title: '添加商品成功 , 请等待审核通过~~', type: 'success' });
					setTimeout(() => {
						uni.navigateBack({
							delta: 1,
						});
					}, 1000);
				}
			});
		},
		ChooseImage(str, add) {
			var that = this;

			wx.chooseImage({
				count: 3, //最多可以选择的图片总数
				sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: function(res) {
					// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
					var tempFilePaths = res.tempFilePaths;
					that.imgList = res.tempFilePaths;
					wx.showToast({
						title: '正在上传...',
						icon: 'loading',
						mask: true,
						duration: 2000,
					});
					('http://shengmimao.oss-cn-chengdu.aliyuncs.com/images/2021/04/14/16183870979738229.jpg');
					var uploadImgCount = 0;
					for (var i = 0, h = tempFilePaths.length; i < h; i++) {
						wx.uploadFile({
							url: 'https://tdg.qianjitianxia.com/upload/upload',
							filePath: tempFilePaths[0],
							name: 'uploadFile',
							header: {
								'Content-Type': 'multipart/form-data',
							},
							success: function(res) {
								uploadImgCount++;
								var data = JSON.parse(res.data);
								//如果是最后一张,则隐藏等待中
								if (uploadImgCount == tempFilePaths.length) {
									wx.hideToast();
								}
								if (data.link) {
									if (!add) {
										//单图
										that.setData({
											[str]: data.link,
										});
									} else {
										//多图
										if (str == 'goodsInfo.productDetails') {
											if (that.goodsInfo.productDetails.length == 0) {
												that.goodsInfo.productDetails = data.link;
											} else {
												that.goodsInfo.productDetails = that.goodsInfo.productDetails + ',' + data.link;
											}
											that.productDetailsList = that.goodsInfo.productDetails.split(',');
											console.log('that.productDetailsList: ', that.productDetailsList);
										}
									}
								}
							},
							fail: function(res) {
								console.log(res);
								wx.hideToast();
								wx.showModal({
									title: '错误提示',
									content: '上传图片失败',
									showCancel: false,
									success: function(res) {},
								});
							},
						});
					}
				},
			});
		},
	},
};
</script>

<style lang="scss">
.dianji {
	position: absolute;
	top: 70rpx;
	right: 34%;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	text {
		font-size: 60rpx !important;
		font-family: PingFang SC;
		color: #999 !important;
	}
}
.content {
	.determine {
		width: 690rpx;
		height: 80rpx;
		background: #f8ce39;
		border-radius: 12rpx;

		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 80rpx;
		margin: 60rpx 0;
	}
	.head {
		width: 690rpx;

		background: #ffffff;
		border-radius: 20rpx;
		.personal {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		input {
			width: 100%;
		}
		.info {
			margin-top: 30rpx;
			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				&::after {
					content: '*';
					color: red;
					margin-left: 5rpx;
					font-size: 28rpx;
				}
			}
			.info_o {
				width: 630rpx;
				height: 70rpx;
				border: 1rpx solid #e6e6e6;
				border-radius: 6rpx;
			}
		}
	}
}
.info {
	margin-top: 30rpx;

	text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;

		&::after {
			content: '*';
			color: red;
			margin-left: 5rpx;
			font-size: 28rpx;
		}
	}

	.info_o {
		width: 630rpx;
		height: 70rpx;
		border: 1rpx solid #e6e6e6;
		border-radius: 6rpx;
	}
}
</style>
